<template>
  <div class="account-container">
    <div class="account-head">
      <span>账户</span>
    </div>

    <div class="account-box">
      <div class="account-imgbox">
        <van-card desc="+8618980082791" title="order_demo" thumb="./../static/img/headlogo.jpeg">
          <template #footer>
            <van-icon name="setting-o" @click="$router.push('/home/settings')" />
          </template>
        </van-card>
      </div>

      <div class="account-data">
        <div class="credit-box">
          <span>余额</span>
          <span>{{accountData.remainingSum}}</span>
        </div>
        <div class="point-box">
          <span>积分</span>
          <span>{{accountData.integral}}</span>
        </div>
        <div class="coupon-box" @click="$router.push('/home/coupon')">
          <span>优惠券</span>
          <span>{{accountData.coupons!==[]?'无':accountData.coupons.length+'张'}}</span>
        </div>
      </div>

      <div class="account-function">
        <div class="function-one">
          <div class="address-box" @click="viewAddress">
            <van-icon name="location-o" />
            <span>地址管理</span>
          </div>
          <div class="card-box" @click="viewCard">
            <van-icon name="idcard" />
            <span>银行卡</span>
          </div>
          <div class="collect-box">
            <van-icon name="star-o" />
            <span>我的收藏</span>
          </div>
        </div>
        <div class="function-two">
          <div class="share-box" @click="showShare = true">
            <van-icon name="share-o" />
            <span>分享</span>
          </div>
        </div>
      </div>
    </div>

    <div>
      <van-share-sheet v-model="showShare" title="立即分享给好友" :options="options" @select="onSelect" />
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant'
import axios from 'axios'

export default {
  data() {
    return {
      showShare: false,
      accountData: {},
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' }
      ]
    }
  },
  created() {
    // 初始化个人账户数据
    this.getAccountData()
  },
  methods: {
    async getAccountData() {
      const { data: res } = await axios.get('/static/account/Account.json')
      this.accountData = res.accountData
    },
    onSelect(option) {
      Toast(option.name)
      this.showShare = false
    },
    viewAddress() {
      this.$store.commit('changeIsForOrder', false)
      this.$router.push('/home/address')
    },
    viewCard() {
      this.$store.commit('changeIsForOrder', false)
      this.$router.push('/home/card')
    }
  }
}
</script>

<style lang="less" scoped>
.account-head {
  position: fixed;
  max-width: 640px;
  width: 100%;
  height: 46px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #ededed;
  color: #363636;
  line-height: 46px;
  text-align: center;
  font-weight: 500;
  z-index: 1;
}

.account-box {
  position: absolute;
  width: 97%;
  height: 900px;
  max-width: 640px;
  left: 50%;
  transform: translateX(-50%);
}
.account-imgbox {
  position: relative;
  width: 100%;
  height: 12em;
  .van-card {
    position: absolute;
    width: 100%;
    bottom: 0;
    background: #ededed;
    .van-card__thumb {
      margin-right: 1.2em;
      .van-image {
        overflow: hidden;
        border-radius: 50%;
        border: 1px solid #c9c9c9;
      }
    }
    .van-icon-setting-o:before {
      position: absolute;
      right: 0.3em;
      bottom: 1.5em;
      font-size: 2.2em;
      color: #525252;
    }
    .van-multi-ellipsis--l2 {
      line-height: 1.5em;
      font-size: 1.5em;
      color: #4d4d4d;
    }
    .van-ellipsis {
      line-height: 1.2em;
      font-size: 1.2em;
      color: #919191;
    }
  }
}

.account-data {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 5em;
  margin-top: 0.6em;
  border-radius: 9px;
  background: white;
  .credit-box,
  .point-box,
  .coupon-box {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 33%;
    span:nth-child(1) {
      margin-bottom: 0.2em;
      color: #525252;
      font-size: 1em;
    }
    span:nth-child(2) {
      font-size: 0.7em;
      color: #6e6e6e;
    }
  }
  .point-box,
  .coupon-box {
    span:nth-child(2) {
      font-size: 0.7em;
      color: orange;
    }
  }
}

.account-function {
  position: relative;
  width: 100%;
  height: 12em;
  margin-top: 0.6em;
  border-radius: 9px;
  background: white;
  .van-icon {
    font-size: 1.8em;
    margin-bottom: 0.2em;
    color: #424242;
  }
  .function-one {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 6em;
    border-bottom: 1px solid #ededed;
    .address-box,
    .card-box,
    .collect-box {
      position: relative;
      width: 33%;
      display: flex;
      flex-direction: column;
      text-align: center;
      span:nth-child(2) {
        font-size: 0.8em;
        color: #999999;
      }
    }
  }
  .function-two {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 6em;
    .share-box {
      position: relative;
      width: 33%;
      display: flex;
      flex-direction: column;
      text-align: center;
      span:nth-child(2) {
        font-size: 0.8em;
        color: #999999;
      }
    }
  }
}
</style>
